10. 様々な視覚化プログラミング環境

視覚化プログラミング入門時の要件

無料 or 安価

どこでも動く

導入が簡単

プログラミングが楽

作成結果の公開が楽

望ましい点

簡単にプログラムできること

表現力があること

様々な環境で利用できること

Windows, Mac, ...

ブラウザで動くこと

Firefox, IE, ...

ブラウザで動かせるシステム

table:描画システム

complexity power standard Web open future

Processing ◎ ◯ ◯ ◯ ◯ △

P5.js ◯ ◯ ◯ ◯ ◯ ◯

Flash △ ◯ ◯ ◯ △ ×

Java △ ◯ ◯ ◎ ◯ ×

JS+Canvas △ ◯ ◯ ◎ ◯ ◯

JS+SVG △ ◯ ◯ ◯ ◯ ◯

HTML ◯ × ◎ ◎ ◯ ×

各種システムで動くもの

table:描画システム

complexity power standard Web open

OpenGL × ◎ ◯ ◯ ◯

PostScript △ ◯ ◯ × △

機種依存

table:描画システム

complexity power standard Web open

GDI(Win) △ △ × × ×

DirectX(Win) × ◎ × × ×

Cocoa(Mac) △ ◯ × × ×

Xlib(Linuxなど) △ △ × × ×

HTMLを視覚化に使う

四角と文字を様々な位置に配置

自動配置を使える

矩形や縦横線だけ利用する視覚化

HTMLによるTreemap視覚化の例

http://gyazo.com/46c2235e3b033375409439e210ffd00e.png

JavaScriptによる対話処理

文字や矩形の位置やサイズを対話的に動かす

ユーザ操作に対応して動かすことができる

動的表示が可能

サーバとHTTP通信

矩形描画

code:html

document.addEventListener('mousedown', mousedown, true);

document.addEventListener('mouseup', mouseup, true);

document.addEventListener('mousemove', mousemove, true);

var rect = document.getElementById('rect');

var down = false;

function mousedown(){ down = true; }

function mouseup(){ down = false; }

function mousemove(e){

if(down){

rect.style.backgroundColor = "#ffff00";

rect.style.height = e.pageY;

rect.style.width = e.pageX;

}

</script>

</body>

</html>

表示を対話的に変化させる

CSS + HTMLの威力

https://scrapbox.io/cd/ https://gyazo.com/361d692b18e3a96fbc5305a69f02c74b

transform:rotate

animation

PostScript

Adobeの「ページ記述言語」

PDFの元システム

Apple社「LaserWriter」で採用

2次元一次変換+平行移動

移動、回転、変型、

透視変換は不可

ベジェ曲線

アフィン変換

線型変換（回転、拡大縮小、剪断）と平行移動の組み合わせ

製図などの基本

アフィン変換

http://gyazo.com/5ddd1b241cb69e927c19a787461bc270.png

透視変換

3次元CGなどで利用される変換

遠近法的描画

透視変換

遠いところを小さく描く

http://gyazo.com/8d60d74cbf382a9bd6bee628e0c34875.png

Q: 円の透視変換?

円の透視変換

http://gyazo.com/4c5aa4823b10c5a9647f338eff95b334.png

PostScript

http://gyazo.com/cc314d3ea71e6e2eea90b4880e91e46c.png

LaserWriter

Appleが1986年ごろ発売したレーザープリンタ

200万円ぐらいした

http://gyazo.com/2b78cf30bc6eba3a69a3486b0730e868.png

NeXT Computer

1985創業 by ジョブズ

1988 NeXT Cube発売

現在のMacの原型

Display PostScriptによる描画

Objective-Cによるプログラミング

http://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png

Adobeの歴史

1985 PostScript開発

レーザープリンタの草分け

1989 PhotoShop発売

1994 アルダス買収

2005 マクロメディア買収

PDF

PostScriptを展開したもの

Acrobatの「Distiller」で変換

PostScriptと関係なく生成も可能

DTP文章の標準になっている

PostScript

描画命令を含むプログラミング言語

後置記法言語

c.f. Forth

言語インタプリタがプリンタ内蔵

プリンタにログイン可能

計算機とプリンタとの通信量を減らす

入力は無い

c.f. Display PostScript

後置記法

数式

1 + 2 (通常の式)

1 2 add (後置)

HPの電卓で採用されていた

括弧が不要

スタックマシンで簡単に実装できる

デモ: dcコマンド

10 20 + 30 * p ⇒ 900

後置記法

一般的な言語

for(i=0;i<10;i++){ printf("abc"); }

Forthの後置記法

1 10 { (abc) show } for

lines.ps

線を一本ずつ描画

code:lines.ps

%!PS-Adobe-3.0

0 0 moveto 0 400 lineto stroke

10 0 moveto 0 400 lineto stroke

20 0 moveto 0 400 lineto stroke

30 0 moveto 0 400 lineto stroke

%....

390 0 moveto 0 400 lineto stroke

400 0 moveto 0 400 lineto stroke

showpage

描画結果

http://gyazo.com/158a2c0d520dae1fa19fcc32d6a2933d.png

ループの利用

code:lines2.ps

%!PS-Adobe-3.0

0.5 setgray

0 10 400 {

0 moveto

0 400 lineto

stroke

} for

showpage

描画結果

http://gyazo.com/8aa4873f89a38e1b8d46282e0ba22fc8.png

Distiller

PostScriptをPDFに変換

ループなどは実行結果がPDFになる

PostScriptで描いたキーボード

http://gyazo.com/b37638d22c0df9d079f111f8c3280961.png

Canvas

Apple社が作成

HTMLのCanvasタグで描画プリミティブを指定

様々な図形を描画可能

HTML5で標準化

最近のブラウザでは動作する

JavaScript拡張なので利用が簡単

jQueryによるライブラリ多数

多角形の描画

code:html

<html>

<body>

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.moveTo(75,50);

ctx.lineTo(100,75);

ctx.lineTo(100,25);

ctx.fill();

</script>

</body>

</html>

描画結果

http://gyazo.com/cdf7dabe75857161b440ded84b4dda85.png

線の描画

code:html

<html>

<body>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.strokeStyle = "rgb(0,0,200)";

var i;

for(i=0;i<300;i++){

ctx.beginPath();

ctx.moveTo(300-i,0);

ctx.lineTo(0,i);

ctx.stroke();

}

</script>

</body>

</html>

描画結果

http://gyazo.com/2f4849f0c5b321975576039ae95bb412.png

矩形描画

code:html

<html>

<body>

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.fillRect(25,25,100,100);

ctx.clearRect(45,45,60,60);

ctx.strokeRect(50,50,50,50);

</script>

</body>

</html>

描画結果

http://gyazo.com/b3aa7686556ec60f67193ca047f261c0.png

矩形描画

code:html

<html>

function draw()

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 55, 50);

}

</script>

</body>

</html>

描画結果

http://gyazo.com/ce38b07db1970b6396ac9fd69a70087e.png

グラデーション

code:html

<html>

<body>

var ctx = document.getElementById('canvas').getContext('2d');

// Create gradients

var lingrad = ctx.createLinearGradient(0,0,0,150);

lingrad.addColorStop(0, '#00ABEB');

lingrad.addColorStop(0.5, '#fff');

lingrad.addColorStop(0.5, '#66CC00');

lingrad.addColorStop(1, '#fff');

var lingrad2 = ctx.createLinearGradient(0,50,0,95);

lingrad2.addColorStop(0.5, '#000');

lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

// assign gradients to fill and stroke styles

ctx.fillStyle = lingrad;

ctx.strokeStyle = lingrad2;

// draw shapes

ctx.fillRect(10,10,130,130);

ctx.strokeRect(50,50,50,50);

</script>

</body>

</html>

描画結果

http://gyazo.com/30bb7098159442c5f9d53a875934f0ae.png

jQuery

JavaScriptを使いやすくするライブラリ

拡張プラグインを作成しやすい

描画用プラグインが多数作られている

jQuery Sparkline

SparklineをCanvasに描画する

Sparkline

Edward Tufteが提唱する簡単な視覚化

テキストの中にグラフを混雑させる

http://gyazo.com/97043cdd33cf04787690a2afcbc59815.png

jQuery Sparklineの例

code:html

$('.line').sparkline();</code>

表示されるSparkine

http://gyazo.com/54620ef5792f56d57bcaef3429b70b45.png

その他のSparkline表示例

http://gyazo.com/010be5fa26b5844fc774f3e4890156a6.png

SVG

かなり昔からの標準化仕様

グラフィクスを宣言的に記述

多くのブラウザで実装されている

矩形描画

code:xml

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

</svg>

描画結果

http://gyazo.com/3ac4f9f16144b0fea50f9a67c322969e.png

マウスドラッグ

code:xml

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

var circleobj = document.getElementById("circle");

function moveGraphics(evt)

circleobj.setAttributeNS(null, "cx", evt.clientX);

circleobj.setAttributeNS(null, "cy", evt.clientY);

}

]></script>

</svg>

描画結果

http://gyazo.com/98509600dea1cdb3dbc1f0b731763c5d.png

DOMにもとづいてSVGでデータ描画

現在もっとも有望

http://gyazo.com/de8d809e2d27f77f76300a6d854fb322.png

Mike Bostock

https://bost.ocks.org/mike/ https://gyazo.com/f72348e5c77e7e3f484b6537137d4c1e.png

郊外住宅地の見えない空き家

http://www3.nhk.or.jp/news/akiya/ http://gyazo.com/5bed14053463cb734b174c0902dd257d.png

Interactive Data Visualization for the Web

d3を使った情報視覚化解説

http://gyazo.com/e16c6e41256a2e95dff2b2eea9389554.png

D3サンプル

code:html

var dataset = 5, 10, 15, 20, 25 ;

d3.select("body").selectAll("div")

.data(dataset)

.enter()

.append("div")

.attr("class", "bar")

.style("height", function(d)

var barHeight = d * 5;

return barHeight + "px";

});

D3サンプル

https://gyazo.com/7514bedd99ee0246581c331b8a7cb2e2

JavaScriptの視覚化ライブラリ20選

http://gyazo.com/150470d90eff54b4a44404a311aa4f71.png

jQuery Visualize

jQueryの視覚化プラグイン

http://gyazo.com/f0c3783ab763fbd9752a589f1d81697f.png

JS Charts

http://gyazo.com/ae5e97e886344fe244f54d5341c372be.png

Flash

もともとはアウトライン表示の紙芝居システム

MacroMediaが買収 (1996)

Adobeが買収 (2005)

ActionScriptによる統合的プログラミング環境に進化

EcmaScript準拠

Flashによる開発

Flex

統合開発環境

学生だと無料

mxmlc

ActionScriptコンパイラ

コマンドラインで起動

無料

ActionScriptによる視覚化例

http://gyazo.com/415e20d629fa111bff4ae33019e5977c.png

ActionScript例

code:javascript

.....

trapezoid.graphics.clear();

trapezoid.graphics.beginFill(0xc0c000,0.6);

trapezoid.graphics.moveTo(SBPOSX+SBWIDTH+5,BOXPOSY+firstline);

trapezoid.graphics.lineTo(SBPOSX+SBWIDTH+5,BOXPOSY+lastline);

trapezoid.graphics.lineTo(SVPOSX-1,SVPOSY+SVHEIGHT);

trapezoid.graphics.lineTo(SVPOSX-1,SVPOSY);

trapezoid.graphics.endFill();

.....

OpenGL

3次元描画ライブラリ

Silicon Graphics社のワークステーションのIris GLライブラリをオープン化

Iris GLの例

code:c

#include <gl/gl.h>

main()

{

prefposition(0,200,0,100);

winopen("GL Example");

RGBmode();

gconfig();

RGBcolor(0,0,100);

clear();

cmov2i(40,45);

RGBcolor(255,255,255);

charstr("Hello, World!");

sleep(10);

}

OpenGLの例

code:c

#include <GL/glut.h>

void ohinit(void)

{

glClearColor(0.0,0.0,0.4,0.0);

glFrontFace(GL_CW);

glEnable(GL_CULL_FACE);

glCullFace(GL_BACK);

}

void ohreshape(int w,int h)

{

glViewport(0,0,(GLsizei)w,(GLsizei)h);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(-1.2,1.2,-1.2,1.2);

glMatrixMode(GL_MODELVIEW);

}

void ohdraw(void)

{

glBegin(GL_TRIANGLE_FAN);

glColor3f(0.0,0.0,1.0); glVertex3f(0.0,0.0,1.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glColor3f(0.0,1.0,0.0); glVertex3f(0.0,1.0,0.0);

glColor3f(0.0,1.0,1.0); glVertex3f(-1.0,0.0,0.0);

glColor3f(1.0,0.0,1.0); glVertex3f(0.0,-1.0,0.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glEnd();

glBegin(GL_TRIANGLE_FAN);

glColor3f(1.0,1.0,0.0); glVertex3f(0.0,0.0,-1.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glColor3f(1.0,0.0,1.0); glVertex3f(0.0,-1.0,0.0);

glColor3f(0.0,1.0,1.0); glVertex3f(-1.0,0.0,0.0);

glColor3f(0.0,1.0,0.0); glVertex3f(0.0,1.0,0.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glEnd();

}

GLUT

OpenGLを各種プラットフォームで動かすライブラリ

Windows, Mac, Linuxなど

ウィンドウ操作、マウス入力などの処理

GLUTの例

code:c

int main(int argc, char** argv)

{

glutInit(&argc,argv);

glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);

glutInitWindowSize(300,300);

glutInitWindowPosition(100,100);

glutCreateWindow(argv0);

ohinit();

glutDisplayFunc(display);

glutReshapeFunc(reshape);

glutKeyboardFunc(keyboard);

glutIdleFunc(idle);

glutMainLoop();

return 0;

}

GL/GLUTを利用した視覚化システムの例

LensBar

WING

LensBar

http://gyazo.com/77b8fad00d790d6e0fa4879d280ce176.png

WING

1D/2D/3Dズーミングによる情報検索

https://Gyazo.com/d44943c8f574a2da409443844eff601c.png

Video: WING

https://www.youtube.com/watch?v=8i1IqBXbV9g

Processing

http://gyazo.com/516bfb0a6512d6e058d748450dc95312.png http://processing.org/

Ben Fryの開発したお手軽言語

Javaのサブセット/拡張

HTMLの記法が少し使える

#ff1234

Ben Fry

https://Gyazo.com/4b14e7234b823d503091bf4f158af271.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873113784 https://i.Gyazo.com/b5d8dcb8b3161e03a4ba6bf83ab3bbd8.png

P5.js

https://p5js.org/ https://p5js.org/assets/img/p5js.svg

ProcessingのJavaScript版

Examples

https://p5js.org/examples/simulate-particle-system.html https://gyazo.com/dc35c16d9d72708a3500035661777339.png

ScrapboxでP5.jsを使う

https://scrapbox.io/prog-exercises https://gyazo.com/f3c1bfc01bde8b4a62a1794c6d065699

エスカレータシミュレーション

https://gyazo.com/760d6ac078a0c67ed78998cef5ace9af.gif http://www.pitecan.com/Puzzle/escalator/

P5.js本

https://www.amazon.co.jp/dp/B016VF1G3W https://images-fe.ssl-images-amazon.com/images/I/41oWnX8VL1L.jpg

https://www.amazon.co.jp/dp/B06W9JYSY5 https://images-fe.ssl-images-amazon.com/images/I/51B8aBkVdQL.jpg

その他のシステム

Java

Cocoa

GDI

Xlib

Jitter

...

まとめ

各種のシステムをパソコンやブラウザで利用可能

手軽なものから本格的なものまで様々

場合に応じて適切なものを利用するとよい

JavaScriptベースの視覚化ライブラリを使うのがおすすめ

D3, P5.js